<template>
    <div class="main">
        <Header class="main_header"/>
        <div style="height: 63px;"></div>
        <a-spin :spinning="spinning" :tip="'加载中'" :delay="100">
            <div class="main_body">
                <div v-for="(item,index) in userList" :key="item.id">
                    <div class="main_body_for">
                        <a-card hoverable style="width: 300px;">
                            <template #cover>
                                <a-image :src="item.avatar" style="width: 300px;height: 300px;"
                                         class="main_body_for_img"/>
                            </template>
                            <a-tooltip placement="bottom" :color="'#2db7f5'">
                                <template #title>
                                    <div>昵称：{{ item.nickname }}</div>
                                    <div class="main_body_for_item">性别：{{ item.sex === '0' ? '男' : '女' }}</div>
                                    <div>粉丝数：{{ item.friendApplyCount }}</div>
                                    <div>关注数：{{ item.attentionCount }}</div>
                                    <div>回答数：{{ item.replyCount }}</div>
                                    <div v-if="item.introduction===null">
                                        简介：空空如也
                                    </div>
                                    <div v-else>
                                        简介：{{ item.introduction }}
                                    </div>
                                </template>
                                <a-card-meta title="用户信息">
                                    <template #description>
                                        <div class="main_body_for_one">
                                            <div class="main_body_for_nickname">昵称：{{ item.nickname }}</div>
                                            <a-popconfirm
                                                    v-if="cookie.get('userinfo')!=null&&item.sex==='0'&&item.isAttention===0"
                                                    @confirm="handleAttention(item.id,index)"
                                                    okText="确定" cancelText="取消"
                                                    title="你确定要关注他么"
                                                    class="main_body_for_attention">
                                                <template #icon>
                                                    <smile-two-tone/>
                                                </template>
                                                <a-button style="margin-top: 5px;"
                                                          v-if="item.id!==attentionUser.userId&&item.isAttention===1"
                                                          type="primary" ghost>关注
                                                </a-button>
                                                <a-button style="margin-top: 5px;"
                                                          v-if="item.id!==attentionUser.userId&&item.isAttention===0"
                                                          type="primary">已关注
                                                </a-button>
                                            </a-popconfirm>
                                            <a-popconfirm
                                                    v-if="cookie.get('userinfo')!=null&&item.sex==='0'&&item.isAttention===1"
                                                    @confirm="handleAttention(item.id,index)"
                                                    okText="确定" cancelText="取消"
                                                    title="你确定要取消关注他么"
                                                    class="main_body_for_attention">
                                                <template #icon>
                                                    <frown-outlined/>
                                                </template>
                                                <a-button style="margin-top: 5px;"
                                                          v-if="item.id!==attentionUser.userId&&item.isAttention===1"
                                                          type="primary" ghost>关注
                                                </a-button>
                                                <a-button style="margin-top: 5px;"
                                                          v-if="item.id!==attentionUser.userId&&item.isAttention===0"
                                                          type="primary">已关注
                                                </a-button>
                                            </a-popconfirm>
                                            <a-popconfirm
                                                    v-if="cookie.get('userinfo')!=null&&item.sex==='1'&&item.isAttention===0"
                                                    @confirm="handleAttention(item.id,index)"
                                                    okText="确定" cancelText="取消"
                                                    title="你确定要关注她么"
                                                    class="main_body_for_attention">
                                                <template #icon>
                                                    <smile-two-tone/>
                                                </template>
                                                <a-button style="margin-top: 5px;"
                                                          v-if="item.id!==attentionUser.userId&&item.isAttention===1"
                                                          type="primary" ghost>关注
                                                </a-button>
                                                <a-button style="margin-top: 5px;"
                                                          v-if="item.id!==attentionUser.userId&&item.isAttention===0"
                                                          type="primary">已关注
                                                </a-button>
                                            </a-popconfirm>
                                            <a-popconfirm
                                                    v-if="cookie.get('userinfo')!=null&&item.sex==='1'&&item.isAttention===1"
                                                    @confirm="handleAttention(item.id,index)"
                                                    okText="确定" cancelText="取消"
                                                    title="你确定要取消关注她么"
                                                    class="main_body_for_attention">
                                                <template #icon>
                                                    <frown-outlined/>
                                                </template>
                                                <a-button style="margin-top: 5px;"
                                                          v-if="item.id!==attentionUser.userId&&item.isAttention===1"
                                                          type="primary" ghost>关注
                                                </a-button>
                                                <a-button style="margin-top: 5px;"
                                                          v-if="item.id!==attentionUser.userId&&item.isAttention===0"
                                                          type="primary">已关注
                                                </a-button>
                                            </a-popconfirm>
                                        </div>
                                        <div class="main_body_for_two">
                                            <div v-if="item.introduction===null">
                                                简介：空空如也
                                            </div>
                                            <div v-else class="main_body_for_introduction">
                                                简介：{{ item.introduction }}
                                            </div>

                                            <a-popconfirm
                                                    v-if="cookie.get('userinfo')!=null&&item.id!==friend.userId&&item.friend===0"
                                                    @confirm="handleApplyFriend(item.id)"
                                                    okText="确定" cancelText="取消"
                                                    title="申请添加为好友"
                                                    class="main_body_for_attention">
                                                <template #icon>
                                                    <frown-outlined/>
                                                </template>
                                                <a-button class="main_body_for_add_friend" type="primary" ghost>加好友
                                                </a-button>
                                            </a-popconfirm>
                                            <div v-if="cookie.get('userinfo')!=null&&item.id!==friend.userId&&item.friend===1"
                                                 class="main_body_for_attention">
                                                <a-button class="main_body_for_add_friend" type="primary">已添加
                                                </a-button>
                                            </div>
                                        </div>
                                    </template>
                                </a-card-meta>
                            </a-tooltip>
                        </a-card>
                    </div>
                </div>
            </div>
        </a-spin>
    </div>
</template>

<script setup lang="ts">
import Header from '@/components/header/index.vue'
import {ref} from "vue";
import {applyFriend, attention, getList, getUserAttentionById} from "@/api/home/makeFriend";
import {Userinfo} from "@/model/personalCenter/userinfo";
import {SmileTwoTone, FrownOutlined} from '@ant-design/icons-vue';
import {Attention, Friend} from "@/model/home/makeFriend";
import {message} from 'ant-design-vue';
// @ts-ignore
import cookie from 'js-cookie'
import {getUserFriendList} from "@/api/personalCenter/myFriends";

//是否显示加载中
const spinning = ref<boolean>(true);

//好友列表
const friendList = ref()

//获取当前用户的好友列表
const handleUserFriendList = () => {
    getUserFriendList(friend.value.userId).then((res) => {
        friendList.value = res.data.data.list
    })
}

//找出当前用户的好友
const isFriend = () => {
    if (friendList.value.length != 0) {
        for (let i = 0; i < userList.value.length; i++) {
            for (let j = 0; j < friendList.value.length; j++) {
                if (userList.value[i].id == friendList.value[j].friendId) {
                    userList.value[i].friend = 1
                    break;
                } else {
                    userList.value[i].friend = 0
                }
            }
        }
    } else {
        for (let i = 0; i < userList.value.length; i++) {
            userList.value[i].friend = 0
        }
    }
}

//添加好友所需的参数
const friend = ref<Friend>({
    userId: 0,
    friendId: 0
})

//申请添加好友
const handleApplyFriend = (friendId: number) => {
    if (cookie.get("userinfo") == null) {
        message.warning('未登录，无法关注');
    } else if (friend.value.userId === 0) {
        message.warning('网络异常，请稍后重试！');
    } else {
        friend.value.friendId = friendId
        applyFriend(friend.value).then(() => {
            message.success("已发出申请")
        })
    }
}

//关注其他人需要的参数
const attentionUser = ref<Attention>({
    userId: 0,
    attentionUserId: 0
})

//当前用户已关注的人列表
const userAttentionList = ref<Attention[]>([])

//获取当前用户已关注的人
const handleUserAttentionById = async () => {
    const res = await getUserAttentionById(attentionUser.value.userId)
    userAttentionList.value = res.data.data.list
    setTimeout(async () => {
        await userIsAttention()
        await isFriend()
        spinning.value = false
    }, 1000)
}

//判断当前用户是否已关注
const userIsAttention = () => {
    if (userAttentionList.value.length != 0) {
        for (let i = 0; i < userList.value.length; i++) {
            for (let j = 0; j < userAttentionList.value.length; j++) {
                if (userList.value[i].id === userAttentionList.value[j].attentionUserId) {
                    userList.value[i].isAttention = userAttentionList.value[j].isAttention
                    break;
                } else {
                    userList.value[i].isAttention = 1
                }
            }
        }
    } else {
        for (let i = 0; i < userList.value.length; i++) {
            userList.value[i].isAttention = 1
        }
    }
}

//关注其他人
const handleAttention = (attentionUserId: number, index: number) => {
    if (cookie.get("userinfo") == null) {
        message.warning('未登录，无法关注');
    } else if (attentionUser.value.userId === 0) {
        message.warning('网络异常，请稍后重试！');
    } else {
        attentionUser.value.attentionUserId = attentionUserId
        attention(attentionUser.value).then(() => {
            if (userList.value[index].isAttention === 1) {
                message.success("关注成功");
            } else {
                message.warn("取消关注成功")
            }
            userList.value[index].isAttention = userList.value[index].isAttention === 1 ? 0 : 1;
        })
    }
}

//用户列表
const userList = ref<Userinfo[]>([])

//获取所有用户
const handleList = async () => {
    const res = await getList()
    userList.value = res.data.data.list
    handleUserFriendList()
    await handleUserAttentionById()
}

//获取用户id
const getUserId = () => {
    if (cookie.get('userinfo') != null) {
        attentionUser.value.userId = JSON.parse(cookie.get('userinfo')).id
        friend.value.userId = JSON.parse(cookie.get('userinfo')).id
    } else {
        attentionUser.value.userId = 0
    }
}

getUserId()
handleList()
</script>

<style lang="less" scoped>
.main {
  height: 100%;
  width: 100%;

  .main_header {
    height: 70px;
    position: fixed;
    width: 100%;
    z-index: 99999;
  }

  .main_body {
    margin-top: 20px;
    padding-left: 15%;
    padding-right: 15%;
    width: 100%;
    //网格布局
    display: grid;
    grid-template-columns: repeat(3, 30%);
    grid-template-rows: repeat(3, 27%);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    justify-content: center;

    .main_body_for {
      width: 33%;

      .main_body_for_one {
        display: flex;

        .main_body_for_nickname {
          //max-width: 100px;
          width: 200px;
          margin-bottom: 20px;
          margin-top: 10px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        .main_body_for_attention {
          margin-left: auto;
        }
      }

      .main_body_for_two {
        display: flex;

        .main_body_for_introduction {
          max-width: 180px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        .main_body_for_attention {
          margin-left: auto;
          margin-top: -7px;

          .main_body_for_add_friend {
          }
        }
      }
    }
  }
}
</style>